<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/float-demo.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container1">
      <img
        src="../img/defaultInteriorBackgroundBanner.jpg"
        alt=""
        width="200"
      />
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error temporibus
      cum eveniet molestiae numquam consequatur nihil ad vitae, quos porro
      commodi dolor. Non eaque ratione et quo id neque vero aut nemo? Doloremque
      placeat illum distinctio animi saepe nam asperiores atque aliquid, culpa
      unde soluta eligendi? Similique officiis ab consequatur quos ad obcaecati
      nemo beatae! Vel, placeat est fuga, magni facere architecto minima beatae
      tempore tempora officiis atque id dolorum delectus? Commodi accusamus
      repellendus dicta ullam nulla temporibus facere sit omnis deserunt!
      Voluptatibus, possimus veritatis! Temporibus minima cum omnis ex rerum!
      Harum odio illo iste laudantium voluptatem nihil quos ullam quam aliquam,
      voluptates libero, non dignissimos sequi magnam! Hic nulla quis excepturi
      nesciunt quas. Magni, sunt culpa animi nostrum quasi alias voluptatibus
      debitis ullam architecto laboriosam cum amet, odit reiciendis ipsa ipsam
      maiores harum pariatur totam assumenda in. Eos labore quos deleniti quasi
      asperiores maxime! Dolor in animi inventore voluptates.
    </div>
    <div class="d2">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus hic
      aliquid, porro sit nisi voluptatum deserunt neque voluptates. Vel earum
      itaque accusamus autem eos eligendi quia est excepturi beatae reiciendis
      atque, ipsam aspernatur et odit dolore adipisci ullam. Modi, recusandae
      asperiores, ipsa enim vel facilis laborum animi aliquid iusto optio
      accusamus? Exercitationem nam, sed minus perspiciatis perferendis aperiam
      libero, recusandae suscipit consequatur neque voluptates corrupti nulla
      quidem necessitatibus quisquam eveniet inventore autem soluta? Optio,
      nobis alias! Ullam officia maxime, est eligendi voluptate praesentium,
      dolorem deserunt suscipit quaerat totam dicta obcaecati ex explicabo magni
      aspernatur minima fugiat omnis fugit laudantium consectetur itaque
      dolorum. Non, eos magni. Nam, saepe dolorem dolore possimus facilis ab
      repellat nobis vel ipsam totam veritatis laboriosam ea a sunt dicta,
      itaque neque quibusdam nisi voluptas aut quidem aspernatur! Ea magni esse
      sint quos dicta! Ullam molestias deserunt, delectus amet sapiente labore
      sunt unde voluptates vitae ab? Natus!
    </div>
    <div class="outer">
      <div class="box box1">盒⼦1</div>
      <div class="box box2">盒⼦2</div>
      <!-- 盒子3的宽度包含盒子2的宽度，盒子3的文字是在浮动元素盒子2以外 -->
      <div class="box box3">盒⼦3</div>
    </div>
    <div class="outer1">
      <!-- <div class="boxA box00">0</div> -->
      <div class="boxA box11">1</div>
      <div class="boxA box22">2</div>
      <div class="boxA box33">3</div>
      <div class="boxA box44">4</div>
      <!-- <div style="clear: both"></div> -->
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores quam
      repellat consequuntur obcaecati nam vel assumenda ea eius quisquam,
      impedit dolores nemo. Est veniam ullam quam ad magni fuga, nostrum
      corrupti hic, fugit eum repellendus tenetur quae. Dolores facilis pariatur
      aliquam veritatis minima impedit saepe, repudiandae in excepturi odio?
      Placeat tempora beatae repudiandae aperiam tenetur illum soluta nemo
      temporibus blanditiis consequatur provident accusantium architecto id
      ratione sit aut velit aliquid officiis atque magnam, itaque repellat.
      Perspiciatis qui minima sunt reiciendis temporibus quae modi amet aperiam
      dolores consectetur minus incidunt officia cum laboriosam culpa possimus
      aliquid, hic quam labore? Quas unde ratione porro neque odio quidem est
      qui perspiciatis voluptatibus dicta! Voluptatum nisi, vitae distinctio
      aspernatur provident, et incidunt iste labore non odit accusantium
      voluptatem. Voluptatibus inventore dolorem voluptatem doloribus aperiam
      tempora illum odio! Qui alias doloremque illo, odio doloribus error rem
      quia ipsam saepe temporibus et eos, dolorum voluptatem distinctio.
    </div>
  </body>
</html>
